<template>
    <div class="container" style="" v-if="hasPermission('orderform:select')">
        <h5 >基本信息</h5>
        <br>
        <el-table
                :data="orderFormVO.orderForm"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"

        >
            <el-table-column label="ID"  align="center">
                <template slot-scope="scope">
                    {{scope.row.orderFormId}}
                </template>
            </el-table-column>
            <el-table-column label="订单号">
                <template slot-scope="scope">
                    {{scope.row.orderFormNumber}}
                </template>
            </el-table-column>

            <el-table-column label="提交时间">
                <template slot-scope="scope">
                    {{scope.row.gmtCreated}}
                </template>
            </el-table-column>
            <el-table-column label="用户ID">
                <template slot-scope="scope">
                    {{scope.row.userId}}
                </template>
            </el-table-column>
            <el-table-column label="订单金额">
                <template slot-scope="scope">
                    <span>{{scope.row.orderFormPrice}}</span>
                </template>
            </el-table-column>

            <el-table-column label="支付方式">
                <template slot-scope="scope">

                    <span v-if="scope.row.orderFormPayType===1">支付宝</span>
                    <span v-if="scope.row.orderFormPayType===2">微信</span>
                </template>
            </el-table-column>
            <el-table-column label="是否支付">
                <template slot-scope="scope">

                    <span v-if="scope.row.orderFormStatus===0">未付款</span>
                    <span v-if="scope.row.orderFormStatus===1">已付款</span>
                </template>
            </el-table-column>
        </el-table>
        <h5>收货人信息</h5>
        <br>
        <el-table  :data="orderFormVO.userAddress"
                   border
                   class="table"
                   ref="multipleTable"
                   header-cell-class-name="table-header">
            <el-table-column label="收货人">
                <template slot-scope="scope">
                    <span>{{scope.row.receiveName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号码">
                <template slot-scope="scope">
                    <span>{{scope.row.receivePhone}}</span>
                </template>
            </el-table-column>
            <el-table-column label="收货地址">
                <template slot-scope="scope">
                    <span>{{`${scope.row.userAddressProvince} ${scope.row.userAddressCity} ${scope.row.userAddressDistrict} ${scope.row.userAddressDetail}`}}</span>
                </template>
            </el-table-column>
        </el-table>
        <h5>商品信息</h5>
        <br>
            <el-table
                    :data="orderFormVO.orderFormDetails"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"

            >
                <el-table-column label="ID" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsId}}
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="商品类别">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsTypeName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="商品价格">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsPrice}}</span>
                    </template>
                </el-table-column>
            </el-table>

    </div>
</template>

<script>
    import { getOrderFormDetail } from '../../api/orderform';
    import { hasMenu, hasPermission, permissionListContain } from '../../utils/authority';

    export default {
        name: 'OrderFormDetail',
        data() {
            return {
                orderFormVO:null
            };
        },
        created() {

            let orderFormId=this.$route.query.orderFormId;
            getOrderFormDetail({
                orderFormId:orderFormId
            }).then(res=>{
                this.orderFormVO=res.data.data;
                this.orderFormVO.userAddress=Array.of(this.orderFormVO.userAddress);
                this.orderFormVO.orderForm=Array.of(this.orderFormVO.orderForm);
            })
        },
        methods: {
            permissionContain(permissionList) {
                return permissionListContain(permissionList);
            },
            hasPermission(permission) {
                return hasPermission(permission);
            },
            hasMenu(menuCode) {
                return hasMenu(menuCode);
            },
        }
    };
</script>

<style scoped>

    .head-text{
        margin-bottom: 6px;
    }
</style>
